<template>
  <view class="bargain_container" :style="half?'width: 345rpx':'width: 702rpx'">
    <img :src="data.bgImage" alt="" class="bgImage" :style="half?'width: 345rpx':'width: 702rpx'">
    <image :src="staticUrl()+'/new/floor_common_more.png'" class="more_" @click="clickJumpInfo">
    </image>
    <!-- 数据 -->
    <!-- <swiper :interval="3000" autoplay circular class="swiper"> -->
    <!-- <swiper-item class="swiper-item" > -->
    <view :class="half?'half2':'half4'">
      <view v-for="(i, index) in goodsList" :key="index" @click="clickJumpInfo" class="item">
        <image v-if="i.inform" mode="aspectFit" :src="i.inform" class="img inform_announcement">
        </image>
        <ImageCache class="img" :class="i.quantity ? '' : 'sellOut_container-img'"
          :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'"
          :mode="'aspectFit'" />
        <view class="goodsName">
          <span class="ephedrine" v-if="i.ephedrine">含特</span>
          <span class="goods_name singleRowEllipsis"> {{ i.goodsName }} </span>
        </view>
        <view v-if="hasToken() && i.promotionPrice">
          <view class="promotionPrice">
            <text class="coinSymbol">￥</text>
            <text class="price" v-if="i.promotionPrice">{{ i.promotionPrice }}</text>
            <text class="packing">/{{ i.goodsUnit }}</text>
          </view>
        </view>
        <view class="prices singleRowEllipsis" v-if="hasToken() && !i.promotionPrice">
          <text class="login_see">资质审核可见</text>
        </view>
        <view class="prices" v-if="!hasToken()">
          <text class="login_see">登录可见</text>
        </view>
      </view>
    </view>

    <!-- </swiper-item> -->
    <!-- </swiper> -->
  </view>
</template>

<script>
import { activityData } from '@/api/home/index'

export default {
  props: {
    data: {
      type: Object,
      default: () => { }
    },
    half: {
      type: Boolean,
      default: () => { }
    }
  },
  data () {
    return {
      goodsList: [],
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 跳转 详情
    clickJumpInfo (val) {
      uni.navigateTo({
        url: `/subpackage/activity/activity?promotionType=${this.data.promotion.promotionType}&title=${this.data.promotion.title}`
      })
    },
    // 获取数据 组装数组
    getList () {
      let a = this.half ? 2 : 4
      activityData({
        path: this.data.promotion.promotionGoodsPath,
        params: { pageNumber: 1, pageSize: a }
      }).then(res => {
        if (res.code === 200) {
          this.goodsList = res.data.records
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
// .half {
//   width: 345rpx;
//   background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_boutique_.png");
// }
// .whole {
//   background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_boutique.png");
// }
// .whole_dark {
//   background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_boutique2.png");
// }
.bargain_container {
  background-size: 100%;
  background-repeat: no-repeat;
  height: 253rpx;
  position: relative;
  .bgImage {
    height: 253rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .more {
    width: 79rpx;
    height: 27rpx;
    position: absolute;
    top: 24rpx;
    right: 0;
    z-index: 1;
  }
  .more_ {
    width: 79rpx;
    height: 44rpx;
    position: absolute;
    top: 14rpx;
    right: 0;
    z-index: 1;
  }

  // .swiper {
  //   height: 175rpx;
  //   margin: 0 18rpx;
  //   padding-top: 62rpx;
  //   z-index: 1;
  //   .swiper-item {
  //     display: grid;
  //     gap: 16rpx;
  //   }

  .half2,
  .half4 {
    height: 175rpx;
    padding-top: 62rpx;
    display: grid;
    position: relative;
  }

  .half2 {
    margin: 0 12rpx;
    gap: 10rpx;
    grid-template-columns: repeat(2, 1fr);
  }
  .half4 {
    margin: 0 18rpx;
    gap: 16rpx;
    grid-template-columns: repeat(4, 1fr);
  }
  .item {
    width: 155rpx;
    height: 175rpx;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    display: flex;
    flex-flow: column nowrap;
    .img {
      width: 95rpx;
      height: 76rpx;
      margin: 16rpx auto 0;
    }
    .goodsName {
      margin: 0 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .goods_name {
        font-size: 20rpx;
      }
    }
    .promotionPrice {
      color: #ef231b;
      text-align: center;
      .coinSymbol {
        font-size: 20rpx;
      }
      .price {
        font-size: 26rpx;
        font-weight: bold;
      }
      .packing {
        font-size: 18rpx;
        color: #999999;
      }
    }
    .prices {
      text-align: center;
      .login_see {
        font-size: 24rpx;
        color: #ef231b;
      }
    }
  }
  // }
}
</style>
